<template>
  <div class="appointApplyContainer">
            <!-- 顶部菜单 -->
        <div class="top">
            <div class="left" @touchend="$router.back()">
                    <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
                    返回
            </div>
            <div class="mid">
                我的有约列表
            </div>
            <div class="right"></div>
        </div>
        <!-- 主要内容 -->
        <div class="main">
            <div class="box" v-for="(list,index) in list" :key="index">
                    <div class="left">
                        <img :src="list.user.photo">
                        <p style="margin-top:.2rem">{{list.user.name}}</p>
                    </div>
                    <div class="mid">
                        <p style="font-size:.3rem;color:#FFB36E">事件：{{list.appoint.event}}</p>
                        <p style="color:red;margin:.1rem 0;">{{list.appoint.appointStartTime}}—{{list.appoint.appointEndTime}}</p>
                        <p>地址：{{list.appoint.site}}</p>
                    </div>
                    <div class="right">
                        <span @touchend="handel(index)" v-if="list.receiverType==false">同意</span>
                        <span v-else>已同意</span>
                    </div>
            </div>
        </div>
  </div>
</template>
<script>
import {getDate} from '@/common/js/base/time.js'
export default {
  data(){
      return{
          list:[],
          userDetail:null
      }
  },
  methods:{
      handel(index){
            // this.$router.push({path:"/common/userIntr",query:{status:"handel"}})
            this.$dialog.confirm({
                    title: '提示',
                    mes: '是否开启有约位置',
                    opts:[
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                                console.log("aaa")
                                let data={
                                    applyID:this.list[index].applyID,
                                    userId:this.list[index].srcUserID,
                                    receiverType:true,
                                    gpsStatus:false
                                }
                                this.ylAjax.handleAppointapply(data)
                                            .then(res=>{
                                                console.log(res)
                                                this.list[index].receiverType=true
                                            })                                
                            }
                        },
                        {
                            txt: '确定',
                            color: true,
                            callback: () => {
                                console.log("aaaa")
                            let data={
                                    applyID:this.list[index].applyID,
                                    userId:this.list[index].srcUserID,
                                    receiverType:true,
                                    gpsStatus:true
                                }
                                this.ylAjax.handleAppointapply(data)
                                            .then(res=>{
                                                console.log(res)
                                                this.list[index].receiverType=true
                                            })  
                            }
                        }                        
                    ]
                });

        },
      showApply(){//查看信息
              let data={
                    userID:localStorage.userid
                }
            this.ylAjax.getMyApplys(data)
                        .then(res=>{
                            console.log(res)
                            if(res.state==0){
                                let a=res.data;
                                console.log(a)
                                // this.list=res.data
                                for(let i=0;i<a.length;i++){
                                    let b=getDate(a[i].appoint.appointEndTime)
                                    let c=getDate(a[i].appoint.appointStartTime)
                                    a[i].appoint.appointEndTime=b.mounth+"月"+b.day+"日"+" "+b.hours+":"+b.minutes
                                    a[i].appoint.appointStartTime=c.mounth+"月"+c.day+"日"+" "+c.hours+":"+c.minutes
                                }
                                this.list=a
                    }
            })
      }
  },
  created(){
      this.showApply()
      console.log("1111")
  }
  
}
</script>

<style lang="less" scoped>
    @import "~less/base";
    .appointApplyContainer{
        position: absolute;
        top:0;
        bottom: 0;
        width: 100%;
        overflow-y: scroll; 
        img{
            max-width: 100%;
            max-height: 100%;
        }
          .top{//顶部导航
            height: 1rem;
            line-height: 1rem;
            color: @color-t;
            background-color: @background-a;
            display: flex;
            font-size: 16px;
            .left{
                flex: 0 0 20%;
                text-align: center;
            }     
            .mid{
                flex: 0 0 60%;
                text-align: center
            }
            .right{
                flex: 0 0 20%;
            }
        }
        .main{
            .box{
                    display: flex;
                    margin-top: .2rem;
                    background-color: @background-bg;
                    padding: .2rem;
                    .left{
                        flex:0 0 20%;
                        img{
                            width: 1rem;
                            border-radius: 50%;
                            vertical-align: middle
                        }
                    }
                    .mid{
                        flex: 0 0 60%
                    }
                    .right{
                        flex: 0 0 20%;
                        text-align: center;
                        line-height: 2rem;
                        font-size: .4rem
                    }
                }
        }

    }
</style>
